/* eslint-disable no-dupe-keys */
const path = require('path') // 引入path模块
function resolve(dir) {
  //path.join(__dirname)设置绝对路径；配置路径
  return path.join(__dirname, dir)
}

module.exports = {
  // 部署开发环境和生产环境
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',

  // 输出目录
  outputDir: 'dist',

  // 静态资源
  assetsDir: 'assets',

  //打包减小体积,去除.map文件
  productionSourceMap: false,

  devServer: {
    open: true, //是否自动弹出浏览器页面
    host: 'localhost', // 主机名
    port: '8080', // 端口号
    https: false, //是否使用https协议
    hotOnly: false, //是否开启热更新
    proxy: {
      '/api': {
        target: 'http://localhost:3000', //API服务器的地址
        ws: true, //代理websockets
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
          '^/api': ''
        }
      }
    }
  },

  css: {
    // 引入全局css,可以从中调取自己需要的css
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/css/reset.scss";`
      }
    },
    // 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less(us)?) 文件视为 CSS Modules 模块。
    requireModuleExtension: true,
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true，开发环境下是 false
    // 是否使用css分离插件
    // 当为true的时候，更改vue的css浏览器不刷新；为false的时候刷新
    extract: false,
    // 开启 CSS source maps?为false,减少css打包体积
    sourceMap: false
  },

  chainWebpack: config => {
    // 修改文件引入自定义路径
    config.resolve.alias.set('@', resolve('src')).set('style', resolve('src/images'))
  }
}
